import { Spin } from "antd"
import "./index.css"
import { createRoot } from "react-dom/client"
const Loading = (props) => {
    let { visible, indicator = null, tip = "加载中。。。", size = "large" } = props
    //创建一个元素
    let loadingEl = document.createElement("div")
    //添加id
    loadingEl.id = "loadingRoot"

    //关闭的方法
    function close() {
        //visible为false的情况下，移除
        let loadingRoot = document.querySelector("#loadingRoot")
        if (loadingRoot) {
            document.body.removeChild(loadingRoot)
        }
    }
    //封装antd的加载动画
    let SpinCom = indicator ? (<Spin className="spin" size={size} tip={tip} indicator={indicator}></Spin>) : (<Spin className="spin" size={size} tip={tip}></Spin>)

    if (visible) {
        //判断页面上有没有loadingRoot这个元素
        let loadingRoot = document.querySelector("#loadingRoot")
        if (!loadingRoot) {
            //将创建的元素添加到页面上
            document.body.appendChild(loadingEl)
            let reactNode = (
                <div className="loading">
                    {SpinCom}
                </div>
            )
            // let el = createPortal(reactNode, loadingEl)
            // //三元表达式来展示是否显示
            // return visible ? el : null

            //创建一个渲染的容器
            let r = createRoot(loadingEl)
            //渲染的方法
            r.render(reactNode)
        }
    } else {
        close()
    }
    return close
}
export default Loading